import { defineComponent, ref } from "vue"
import {
  darkTheme,
  dateEnUS,
  dateZhCN,
  enUS,
  NConfigProvider,
  NMessageProvider,
  zhCN,
  type GlobalThemeOverrides,
} from "naive-ui"
import { RouterView } from "vue-router"
import { useThemeStore } from "./store/theme/theme"
import { useLocalesStore } from "./store/locales/locales"
import themeList from "./themes"

export default defineComponent({
  name: "stoneZeusUiApp",
  setup(props, ctx) {
    const isRouterAlive = ref(true)
    const themeStore = useThemeStore()
    const currentTheme = computed(() =>
      themeStore.darkTheme ? darkTheme : undefined
    );
    const localesStore = useLocalesStore();

    const reload = () => {
        isRouterAlive.value = false
        nextTick(() => (isRouterAlive.value = true))
    };

    provide("reload", reload);

    return {
      reload,
      isRouterAlive,
      currentTheme,
      localesStore
    }
  },
  render() {
    const themeOverrides: GlobalThemeOverrides =
      themeList[this.currentTheme ? "dark" : "light"]
    return (
      <NConfigProvider
        theme={this.currentTheme}
        themeOverrides={themeOverrides}
        style={{ width: "100%", height: "100vh" }}
        dateLocale={
          String(this.localesStore.getLocales) === "zh_CN" ? dateZhCN : dateEnUS
        }
        locale={String(this.localesStore.getLocales) === "zh_CN" ? zhCN : enUS}
      >
        <NMessageProvider>
          {this.isRouterAlive ? <RouterView></RouterView> : ""}
        </NMessageProvider>
      </NConfigProvider>
    );
  },
});
